<template>
  <el-dialog title="新增商务人员任职信息" width="40%" :visible.sync="dialogVisible" :before-close="reset">
    <vxe-form
      title-colon
      ref="xForm"
      :data="form"
      :rules="rules"
      :loading="loading"
      title-width="100"
      title-align="right"
      @submit="submit"
    >
      <vxe-form-gather span="24">
        <vxe-form-item title="姓名" field="employeeName" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input
              v-model="data.employeeName"
              placeholder="姓名"
              clearable
              :disabled="isEdit"
              @change="$refs.xForm.updateStatus(data)"
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="项目岗位" field="projectPost" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.projectPost" placeholder="项目岗位" :disabled="isEdit" clearable>
              <vxe-option
                v-for="item in postList"
                :key="item.id"
                :value="item.projectPost"
                :label="item.projectPost"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="身份证号" field="idCard" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-input
              :disabled="isEdit"
              v-warn="data.idCard"
              v-model="data.idCard"
              placeholder="身份证号"
              clearable
              @change="$refs.xForm.updateStatus(data)"
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="到岗时间" field="arrivalTime" :disabled="isEdit" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input
              v-model="data.arrivalTime"
              :disabled="isEdit"
              placeholder="日期"
              class="date"
              type="date"
              clearable
              valueFormat="yyyy-MM-dd"
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="离岗时间" field="leaveTime" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input
              v-model="data.leaveTime"
              placeholder="日期"
              class="date"
              :disabled="!isEdit"
              clearable
              type="date"
              valueFormat="yyyy-MM-dd"
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="是否兼职" field="isPartTime" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-radio-group v-model="data.isPartTime" :disabled="isEdit">
              <vxe-radio :label="true" content="是"></vxe-radio>
              <vxe-radio :label="false" content="否"></vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
        <vxe-form-item title="是否实习" field="isPractice" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-radio-group v-model="data.isPractice" :disabled="isEdit">
              <vxe-radio :label="true" content="是"></vxe-radio>
              <vxe-radio :label="false" content="否"></vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
      </vxe-form-gather>
      <vxe-form-item span="24" align="right" :item-render="{}">
        <template #default>
          <vxe-button size="small" @click="reset">取 消</vxe-button>
          <vxe-button size="small" type="submit" status="primary">确 定</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </el-dialog>
</template>
<script>
import VXETable from 'vxe-table';
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    postList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        category: '外部员工',
        employeeName: '',
        projectPost: '',
        idCard: '',
        arrivalTime: '',
        leaveTime: null,
        isPartTime: true,
        isPractice: true,
      },
      total: 100,
      rules: {
        employeeName: [{ required: true, message: '请输入名字' }],
        idCard: [
          { required: true, message: '请输入身份证' },
          {
            validator({ itemValue }) {
              const sfzReg =
                /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
              // 自定义校验
              if (!sfzReg.test(itemValue)) {
                return new Error('身份证不符合标准');
              }
            },
          },
        ],
      },
    };
  },
  directives: {
    warn(el, binding) {
      if (binding.value === '123') {
        el.setAttribute('id', 'warn');
      } else {
        el.setAttribute('id', '');
      }

      return;
    },
  },
  watch: {},
  methods: {
    search() {},
    reset() {
      (this.form = {
        category: '外部员工',
        employeeName: '',
        projectPost: '',
        idCard: '',
        arrivalTime: '',
        leaveTime: null,
        isPartTime: true,
        isPractice: true,
      }),
        (this.dialogVisible = false);
    },
    handleClose() {
      console.log(123);
    },
    submit() {
      if (this.isEdit) {
        if (!this.form.leaveTime) {
          VXETable.modal.message({
            content: '请选择离岗时间',
            status: 'error',
          });
          return;
        }
        this.$emit('addOutsideFn', { ...this.form }, 'edit');
        return;
      }
      this.$emit('addOutsideFn', { ...this.form }, 'add');
      // this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
#warn {
  position: relative;
  &::before {
    font-family: vxeiconfont !important;
    content: '\e697';
    position: absolute;
    left: calc(100% + 5px);
    white-space: nowrap;
    color: rgb(255, 136, 0);
    font-size: 18px;
  }
  &::after {
    font-family: vxeiconfont !important;
    content: '该身份证已有记录，请选择调入外部员工';
    position: absolute;
    left: calc(100% + 25px);
    white-space: nowrap;
    color: rgb(255, 136, 0);
    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
